<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src vscode-resource:; script-src 'unsafe-inline' vscode-resource:; style-src 'unsafe-inline' vscode-resource:; img-src data: vscode-resource:;"
    />
    <link
      rel="stylesheet"
      href="@PWD/ui/shared/vendor/bootstrap/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="@PWD/ui/shared/vendor/fontawesome/css/fontawesome.min.css"
    />
    <link
      rel="stylesheet"
      href="@PWD/ui/shared/vendor/fontawesome/css/solid.min.css"
    />
    <script>
      const pwd = `@PWD`;
    </script>
    <link rel="stylesheet" href="@PWD/ui/shared/styles.css" />
  </head>
  <body class="container d-flex h-100 mx-auto my-8 text-center">
    <page-header></page-header>
    <div class="row content-row">
      <div class="col text-left mt-2 scrollable" id="notes">
        <h3 class="mx-auto pt-2 pb-4 text-white-50a text-center">
          What's New in
          <b>
            <a
              id="current-version"
              href="https://github.com/shanalikhan/code-settings-sync/blob/master/CHANGELOG.md"
              >vX.X.X
            </a>
          </b>
        </h3>
      </div>
      <div class="col mt-2 scrollable">
        <div>
          <h3 class="mx-auto mt-2 text-white-50a text-left">
            Configuration
          </h3>
          <p class="mx-auto mt-2 mb-3 text-white-50a text-left">
            Login via GitHub to setup Settings Sync, or configure the settings
            manually.
          </p>
          <div class="container p-0 mb-3">
            <div class="row">
              <div class="col">
                <a
                  href="#"
                  onclick="sendCommand('loginWithGitHub')"
                  title="Login with GitHub"
                  class="btn btn-primary font-weight-bold"
                >
                  Login with GitHub
                </a>
              </div>
              <div class="col">
                <a
                  href="#"
                  onclick="sendCommand('editConfiguration')"
                  title="Edit Configuration"
                  class="btn btn-primary font-weight-bold"
                >
                  Edit Configuration
                </a>
              </div>
            </div>
          </div>
          <div class="text-left my-2">
            <a
              href="#"
              onclick="sendCommand('downloadPublicGist')"
              title="Download Public Gist"
              >Download Public Gist</a
            >
          </div>
        </div>
        <div>
          <h3 class="mx-auto mb-3 text-white-50a text-left">
            Show Your Support
          </h3>
          <p class="mx-auto mt-2 mb-3 text-white-50a text-left">
            While being free and open source, if you find
            <b>Settings Sync</b>
            useful, please consider supporting it by donating via PayPal or Open
            Collective.
          </p>
          <div class="container p-0 mb-3">
            <div class="row">
              <div class="col">
                <a
                  href="https://opencollective.com/code-settings-sync"
                  title="Become a Sponsor"
                  class="btn btn-primary font-weight-bold"
                  >Become a Sponsor</a
                >
              </div>
              <div class="col">
                <a
                  href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=4W3EWHHBSYMM8&lc=IE&item_name=Code%20Settings%20Sync&item_number=visual%20studio%20code%20settings%20sync&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted"
                  title="Donate via PayPal"
                  class="btn btn-primary font-weight-bold"
                  >Donate via PayPal</a
                >
              </div>
            </div>
          </div>
          <div class="text-left mt-2">
            <a
              href="https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync&ssr=false#review-details"
              >Write a Review</a
            ><br />
            <a href="https://github.com/shanalikhan/code-settings-sync"
              >Star or Fork Settings Sync on GitHub</a
            ><br />
            <a href="https://twitter.com/itsShanKhan">Follow me on Twitter</a
            ><br />
          </div>
        </div>
      </div>
    </div>
    <footer class="footer row text-left">
      <div class="col col-one">
        <h3 class="mx-auto mb-3 text-white-50a">
          Need Help?
        </h3>
        <a href="https://shanalikhan.github.io/">Homepage</a><br />
        <a href="https://github.com/shanalikhan/code-settings-sync/issues"
          >Questions & Issues</a
        >
        <br />
        <a
          href="https://github.com/shanalikhan/code-settings-sync/blob/master/CONTRIBUTING.md"
          >Contribute</a
        >
        <br />
      </div>
      <div class="col col-two">
        <h3 class="mb-3">Sponsors</h3>
        <p class="mx-auto mt-2 mb-3 text-white-50a">
          Contact me on
          <a href="https://twitter.com/itsShanKhan">Twitter</a> or
          <a href="https://github.com/shanalikhan">GitHub</a>
        </p>
      </div>
    </footer>
    <form class="form dock-bottom-right">
      <div class="custom-control custom-checkbox">
        <input
          class="custom-control-input checkbox"
          type="checkbox"
          id="customCheck1"
          onclick="sendCommand('dontShowThisAgain', !this.checked)"
        />
        <label for="customCheck1" class="custom-control-label">
          Show this page on startup
        </label>
      </div>
    </form>
    <script defer src="@PWD/ui/shared/page-header.js"></script>
    <script defer src="@PWD/ui/shared/fonts.js"></script>
    <font-injector></font-injector>
    <script defer>
      const releaseNotes = JSON.parse(`@RELEASE_NOTES`);
      const checked = "@CHECKED";
    </script>
    <script defer src="@PWD/ui/landing-page/landing-page.js"></script>
  </body>
</html>
